<template>
  <div>
    <div class="sysInform">
      <span class="text_big">系统消息-列表</span>
      <span class="text_small">（共1条）</span>
      <div style="margin-top: 15px" class="inputBox">
        <el-input placeholder="内容搜索" v-model="input2">
          <template slot="append">搜索</template>
        </el-input>
      </div>
    </div>
    <div class="operate">
      <div @click="editUser">查看</div>
      <div class="deloperate">删除</div>
    </div>
    <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column
            type="selection"
            label="全选"
            width="75"
          ></el-table-column>
          <el-table-column prop="name" label="id" sortable width="150">
              {{name}}
          </el-table-column>
          <el-table-column prop="date" label="接收时间" sortable width="180">
              {{time}}
          </el-table-column>
          <el-table-column prop="date" label="内容" width="680">
            <span class="present"
              >{{content}}</span
            > </el-table-column
          >
          <el-table-column prop="state" label="是否未读" sortable width="220">
          </el-table-column>
          <el-table-column prop="operate" label="操作" >
            <span class="columns" @click="editUser">查看</span><span class="copy">删除</span
            >
          </el-table-column>
        </el-table>
    <!-- <div class="horizon">
      <div style="margin-left: 50px">
        <el-checkbox v-model="checked"></el-checkbox>
        全部
      </div>
      <div style="margin-left: 50px">ID</div>
      <div style="margin-left: 152px">接收时间</div>
      <div style="margin-left: 218px">内容</div>
      <div style="margin-left: 543px">是否未读</div>
      <div style="margin-left: 160px">操作</div>
    </div>
    <div class="horizon_content">
      <div style="margin-left: 50px">
        <el-checkbox v-model="checked" sortable></el-checkbox>
      </div>
      <div style="margin-left: 87px">{{name}}</div>
      <div style="margin-left: 120px">{{time}}</div>
      <div style="margin-left: 134px">
        {{content}}
      </div>
      <div style="margin-left: 239px">已读</div>
      <div style="margin-left: 192px; color: #fb534b" @click="editUser">
        查看
      </div>
      <div style="margin-left: 30px; color: #fb534b">删除</div> -->
      <Drawer :isDrawer.sync="isDrawer" :title="'文档管理-新增'" :size="'60%'">
        <News></News>
        <template #footer>
          <el-button size="medium" @click="closeDrawer">取消</el-button>
          <el-button type="primary" size="medium">保存</el-button>
        </template>
      </Drawer>
    </div>
  <!-- </div> -->
</template>
<script>
import Drawer from "@/components/drawer";
import News from "./components/News.vue";
import * as api from "./api";
export default {
  components: {
    Drawer,
    News,
  },
  data() {
    return {
      isDrawer: false,
      checked: false,
      input1: "",
      input2: "",
      input3: "",
      select: "",
      time: "",
      name:"",
      content:"",
      searchForm: {
        realname: "",
        orgname: "",
        role: "",
        memberGroup: "",
        type: "",
        status: "",
        name:""
      },
      tableData: [
        {
          state: "已读",
          net: "标题标题标题",
          date: "2016-05-02",
          name: "戴用名",
        },
        {
          state: "已读",
          net: "标题标题标题",
          date: "2016-05-04",
          name: "戴用名",
        },
        {
          state: "已读",
          net: "标题标题标题",
          date: "2016-05-01",
          name: "戴用名",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          state: "已读",
          net: "标题标题标题",
          date: "2016-05-03",
          name: "戴用名",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  created() {
    this.mail()
  },
  methods: {
    //   邮件查询
    mail() {
      const params = {
        userId: 1,
      };
      api.mailQuery(params).then((res) => {
          console.log(222,res);
        this.time = res.data.list[2].createdDate
        this.name = res.data.list[2].userName
        this.content = res.data.list[2].mailMessage
      });
    },
    editUser() {
      this.isDrawer = true;
    },
    closeDrawer() {
      this.isDrawer = false;
    },
  },
};
</script>

<style lang="" scoped>

.columns {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;}
  .copy {
  color: rgba(251, 83, 75, 1);
  margin-right: 20px;
}
.horizon_content {
  display: flex;
  margin-top: 28px;
  width: 1615px;
  height: 42px;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  line-height: 42px;
}
.horizon {
  display: flex;
  margin-top: 25px;
}
.deloperate {
  margin-left: 10px;
}
.operate {
  display: flex;
  margin-bottom: 20px;
}
.operate > div {
  width: 56px;
  height: 26px;
  background-color: #6878f0;
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  font-family: Source Han Sans CN;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  line-height: 26px;
}
.text_big {
  height: 24px;
  font-family: Source Han Sans CN;
  font-weight: 700;
  color: #666666;
  font-size: 24px;
  margin-top: 5px;
}
.text_small {
  height: 16px;
  font-family: Source Han Sans CN;
  color: #666666;
  font-size: 16px;
  margin-top: 10px;
}
.sysInform {
  display: flex;
  margin-top: 10px;
}
.inputBox {
  width: 300px;
  height: 38px;
  margin-left: 1085px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
